import { useEffect } from 'react';
import { observer  } from 'mobx-react-lite';
import Todo from "./Todo/index.js";
import { useStoreContext } from '../../context';

function Main() {
  const { todosStore } = useStoreContext();
  const { filterTodos, load } = todosStore;

  useEffect(() => {
    load();
  }, []);

  return (
    <section className="main">
      <ul className="todo-list">
        {filterTodos.map(todo => (
          <Todo todo={todo} key={todo.id} />
        ))}
      </ul>
    </section>
  )
}

export default observer(Main);
